<template>
  <div>
    <!--  分割线-->
    <el-divider></el-divider>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <!--     基本资料 -->
      <el-tab-pane label="基本资料" name="first">
        <div class="firstDiv" :model="firstlist">
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>姓名:<br/>{{ firstlist.empName }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>性别:<br/>{{ firstlist.empSex }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>照片:<br/>
                  <el-link :href="firstlist.empPicture">查看</el-link>
                </div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>是否在职:<br/>{{ firstlist.empWorkstatus }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>出生日期:<br/>{{ firstlist.empBirthdate }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>证件类型:<br/>{{ firstlist.empPaperstype }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>证件号:<br/>{{ firstlist.empPapersnum }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>最高学历:<br/>{{ firstlist.empHigthEducation }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>最高学位:<br/>{{ firstlist.empHigthDegree }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>所内身份:<br/>{{ firstlist.empPosition }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>民族:<br/>{{ firstlist.hrNationId }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>政治面貌:<br/>{{ firstlist.hrPoliticalId }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>婚姻情况:<br/>{{ firstlist.empMaritalsta }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>门禁号:<br/>{{ firstlist.empEntrancenum }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple-light">
                <div>专业部:<br/>{{ firstlist.hrSpecialtyId }}</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <!--      从业资料-->
      <el-tab-pane label="从业资料" name="second">
        <div class="secondDiv" :model="secondlist">
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>执业类别:<br/>{{ firstlist.hrPractiseId }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>执业证号码:<br/>{{ firstlist.empPracnum }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>首次执业时间:<br/>{{ firstlist.empPracdate }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>首次执业地:<br/>{{ firstlist.empPracsite }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <!--                要连表-->
                <div>资格证类别:<br/>{{ firstlist.hrCertifyId }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>资格证号码:<br/>{{ firstlist.empCertifynum }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>资格证取得方式:<br/>{{ firstlist.empGainway }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>资格证取得地:<br/>{{ firstlist.empGainsite }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content"></div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>个人介绍:<br/>{{ firstlist.empIntroduce }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content"></div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content"></div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <!--     入职情况 -->
      <el-tab-pane label="入职情况" name="third">
        <div class="thirdDiv" :model="thirdlist">
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>入职时间:<br/>{{ firstlist.empEntrydate }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>社保号码:<br/>{{ firstlist.empSocialNum }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>合同开始时间:<br/>{{ firstlist.empContStartdate }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>合同截止时间:<br/>{{ firstlist.empContEnddate }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>是否参保:<br/>{{ firstlist.empInsured }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content"></div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
      <!--联系信息-->
      <el-tab-pane label="联系信息" name="fourth">
        <div class="fourthDiv" :model="fourthlist">
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>手机号码:<br/>{{ firstlist.empPhone }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>联系电话:<br/>{{ firstlist.empContactPhone }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>邮箱:<br/>{{ firstlist.empEmail }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>邮政编码:<br/>{{ firstlist.empPostcode }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>QQ号:<br/>{{ firstlist.empQq }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content">
                <div>微信号:<br/>{{ firstlist.empWechat }}</div>
              </div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <div class="grid-content">
                <div>联系地址:<br/>{{ firstlist.empSite }}</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content"></div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content"></div>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  name: "HrEmps.vue",
  components: {},
  data() {
    return {
      activeName: 'first',
      firstlist: {},
      secondlist: {},
      thirdlist: {},
      fourthlist: {},
      firstDiv: {},
      secondDiv: {},
      thirdDiv: {},
      fourthDiv: {},
      id: this.$route.params.id,
    };
  },
  created() {
    this.getHrEmp();
  },
  methods: {
    //根据id查询信息
    getHrEmp() {
      this.$http
          .get("hrEmp",
              {params: {id: this.id,"chaxun":"1"}})
          .then((res) => {
            if (res.data.data.list[0].empSex == "M") {
              res.data.data.list[0].empSex = "男";
            } else {
              res.data.data.list[0].empSex = "女";
            }
            if (res.data.data.list[0].empWorkstatus == "Y") {
              res.data.data.list[0].empWorkstatus = "在职";
            } else {
              res.data.data.list[0].empWorkstatus = "不在职";
            }
            this.firstlist = res.data.data.list[0];
          })
          .catch(function (error) {
            console.log(error);
          });
    },
    handleClick() {
      //接收参数
      return this.$route.params.id;
    },
  },
}
</script>

<style scoped>
.grid-content {
  min-height: 100px;
  border: 1px solid gainsboro;
}

.grid-content > div {
  margin: 6% 0 0 1%
}
</style>